<template>
	<div class="header">
		<div class="header_box">
			<div class="header_logo">
				<img src="../assets/logo.png" />
				<div class="tall">
					<p class="pa">专注于室内装饰装修</p>
					<p class="pb">400-000-1119</p>
				</div>
			</div>
			<div class="header_nav">
				<a :class="{ 'action': HeadIndex == '1' }" @click="jump('home')">
					<p class="pa">首页</p>
					<p class="pb">HOME</p>
				</a>
				<a :class="{ 'action': HeadIndex == '2' }" @click="jump('designer')">
					<p class="pa">设计团队</p>
					<p class="pb">Design Team</p>
				</a>
				<a :class="{ 'action': HeadIndex == '3' }" @click="jump('case')">
					<p class="pa">项目案例</p>
					<p class="pb">Classic Case</p>
				</a>
				<a :class="{ 'action': HeadIndex == '4' }"  @click="jump('news')">
					<p class="pa">新闻中心</p>
					<p class="pb">News Center</p>
				</a>
				<a :class="{ action: HeadIndex == '5' }" @click="jump('about')">
					<p class="pa">关于亚中</p>
					<p class="pb">About Us</p>
				</a>

			</div>
		</div>

	</div>
</template>

<script setup>
	import {
		useRouter
	} from 'vue-router'; // 引入 useRouter

	const props = defineProps({
		HeadIndex: {
			type: [Number, String],
			default: "1",
		},
	});
	const router = useRouter(); // 获取路由实例

	const jump = (path) => {
		router.push({
			name: path
		}); // 使用 router 实例进行跳转
	}
</script>

<style scoped lang="less">
	.header {
		height: 88px;
		display: flex;
		align-items: center;

		.header_box {
			width: 1400px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;

			.header_logo {
				height: 60px;
				display: flex;
				align-items: center;

				img {
					height: 60px;
					padding-right: 15px;
				}

				.tall {
					padding-left: 15px;
					border-left: 1px solid #ccc;
					height: 45px;

					p {
						line-height: 20px;
						color: #949494;
					}

					.pa {
						font-size: 14px;
					}

					.pb {
						margin-top: 5px;
						font-size: 16px;
					}
				}

			}

			.header_nav {
				display: flex;
				align-items: center;

				.action {
					color: #da1a45;
				}

				a {
					cursor: pointer;
					display: block;
					padding: 0 20px;
					text-align: center;

					.pa {
						font-size: 16px;
						font-weight: bold;
					}

					.pb {
						font-size: 12px;

					}
				}

				a:hover {
					color: #da1a45;
				}
			}
		}
	}
</style>